<template>
    
    <!-- 组件的模板 -->
    <div class="page__bd">
        <div class="weui-search-bar" id="searchBar">
            <form class="weui-search-bar__form">
                <div class="weui-search-bar__box">
                    <i class="weui-icon-search"></i>
                    <input type="search" class="weui-search-bar__input" id="searchInput" placeholder="搜索" required="">
                    <a href="javascript:" class="weui-icon-clear" id="searchClear"></a>
                </div>
                <label class="weui-search-bar__label" id="searchText" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);" @click="toSearch">
                    <i class="weui-icon-search"></i>
                    <span>搜索</span>
                </label>
            </form> 
        </div>
    </div>
    <div class="page user-select multi-select">
      <scroller :lock-y="true" v-ref:scrollerdom>
        <div class="mod-crumbs bg-color scroller-wrap" v-show="hierarchyList.length>1">
          <template v-for="(index,hierarchy) in hierarchyList">
                <template v-if="index<(hierarchyList.length-1)">
                    <a class="nav-item" @click="stepHierarchy(index)">{{hierarchy.name}}</a>
                    <span class="arrow nav-item">&gt;</span>
                </template>
                <template v-if="index==(hierarchyList.length-1)">
                    <em class="nav-item">{{hierarchy.name}}</em>
                </template>
          </template>
        </div>
      </scroller>

      <ul class="list com-border-top com-border-bottom">
            <li class="weui-cells_checkbox has-hierarchy"  v-for='group in grouplist'>
                <label class="touch">
                    <div class="info com-border-bottom">
                        <p class="title">{{group.name}}</p>
                    </div>
                </label>
                <div class="hierarchy" v-show="group.memberList.length||group.children.length" @click="stepNext(group.id)">下级</div>
            </li>
      </ul>
      <ul class="list com-border-top com-border-bottom">
            <li class="weui-cells_checkbox" v-for="member in memberList">
                <label class="touch" for="{{member.user_id+'member'}}">
                  <img v-if="member.logo.thumb_url!=''" class="avatar" :src="member.logo.thumb_url">
                  <img v-if="member.logo.thumb_url==''" class="avatar" src="../../static/imgs/avatar.png">
                    <div class="info com-border-bottom" @click="selectMemberByMemberId(member)">
                        <p class="title"><span class="tag tag_1" v-if="member.identity!=999999" 
                                :class="{'tag tag_1':(member.identity==2||member.identity==1),
                                         'tag tag_2':(member.identity==3||member.identity==8)}">{{member.identity_str}}</span>{{member.nick_name}}
                        </p>
                    </div>
                </label>
            </li>
      </ul>
    </div>  
</template>

<script>
    let pageDate = {}
    let webViewID = ''

    /**
     *  引入工具类库 或 Native API
     *  example : import widget from 'gapi/widget'
     */
    
    /**
     *  引入组件 以及 组件接口(Action)
     *  example : import Somecomponents from 'components/Somecomponents/Somecomponents'
     */
    import cache from 'gapi/cache.js'
    import commonPage from 'clientApi/commonPage.js'
    import * as util from 'js/util.js'
    import GroupUtil from 'js/GroupUtil.js'
    import Scroller from 'vux/dist/components/scroller'
    import clientUi from 'gapi/clientUi'

    /**
     *  组件实例对象
     */
    export default {
        components: {
          Scroller
        },
        data: function(){
            return{
                group:{},
                id:'',
                hierarchyList:[],
                grouplist:[],
                memberList:[],
                cacheGroupList:[]
            }
        },
        watch: {
          'hierarchyList': function(){
            let allWidth = 0
            this.$nextTick(function () {
              if($('.scroller-wrap .nav-item').length){
                $('.scroller-wrap .nav-item').each(function(i, o){
                  if(o.tagName.toLowerCase() == 'a'){
                    allWidth += (parseInt(o.offsetWidth) + 16)
                  }else{
                    allWidth += parseInt(o.offsetWidth)
                  }
                })
                allWidth += 30
                $('.scroller-wrap').width(allWidth + 'px')

                this.$refs.scrollerdom.reset()
              }
            })
          }
        },
        computed: {
           
        },
        vuex: {
            getters: {

            },
            actions: {

            }
        },
        methods: {
            /**
             * 初始化
             * @method init
             * @public
             * @return {Null} void
             */
            init (){
                  this.id = util.getUrddataString('id')
                  if(this.id){
                        cache.getMemoryCache('cacheGroupList', (data) => {
                            if(data){
                                this.group = new GroupUtil(data)
                                this.showGroup(this.id,this.group.group)
                            }
                        })
                  }else{
                        cache.getCache('KqCacheMessge',(data)=>{
                          pageDate.project_id = data.project_id
                          pageDate.team_id = data.team_id
                          pageDate.user_id = data.user_id
                          this.getGroupList()
                        })
                  }
                  commonPage.getWebViewID((data)=>{
                      webViewID = data
                  })
            },
            selectMemberByMemberId(member){
                console.log(JSON.stringify(member))
                let selectMember = {'id':member.user_id,'name':member.nick_name}
                clientUi.showDialog('转让超级管理员', '确定将项目转让给' + member.nick_name + '?', function(data){
                    if(data.status==1){
                         cache.getMemoryCache('webViewID',(data)=>{
                            if(data){
                              commonPage.goBack(1,{'key':'selectMember','value':selectMember},data.webViewID)
                            }
                        })
                    }
                }, '确定', '取消')
                
            },
            /**
             * 跳转下一级
             * @param  {[type]}
             * @return {[type]}
             */
            stepNext(id){
                window.location.href="dmsaas://SelectSinglePeople?urdData="+encodeURIComponent(`id=${id}`)
            },
            /**
             * 点击对应层级 
             * 
             * @return {[type]}
             */
            stepHierarchy(index){
                let leg = this.hierarchyList.length-1
                if(index<leg){
                    cache.getMemoryCache('webViewID'+index,(data)=>{
                        if(data){
                          commonPage.goBack(1,{},data.webViewID)
                        }
                    })
                }
            },
            // 当前页面数据处理
            showGroup(id,list){
                list.some((item)=>{
                  if(item.id==id){
                      item.path.splice(0,1)//人员选择去掉全部一级
                      this.hierarchyList = item.path
                      this.grouplist = item.children
                      this.memberList = item.memberList
                      let len = this.hierarchyList.length-1
                      cache.setMemoryCache('webViewID'+len,{'webViewID':webViewID})//保存当前页面唯一标识，点击面包屑使用
                      return true
                  }else{
                      this.showGroup(id,item.children) 
                  }
              })
            },
            // 获取小组列表
            getGroupList(){
                commonPage.loadPageStatus('loading')
                util.ajax({
                    url: '/group/node_tree',
                    data: {
                        team_id:pageDate.team_id,
                        project_id: pageDate.project_id
                    },
                    success: (res) => {
                        console.log(res)
                        // res = JSON.parse(res)  
                        commonPage.loadPageStatus('loadSuccess')
                        if(res&&res.errno==0){
                            this.cacheGroupList = res.data
                            this.group = new GroupUtil(this.cacheGroupList)
                            // this.hierarchyList = [{'id':'all','name':'全部'}]
                            // this.grouplist = this.cacheGroupList
                            let allMemberList = this.group.formatMember(this.cacheGroupList)
                            cache.setMemoryCache('allMemberList', allMemberList)
                            cache.setMemoryCache('cacheGroupList', this.cacheGroupList)
                            this.showGroup(this.cacheGroupList[0].id,this.cacheGroupList)
                        }else if(res.errmsg){
                             widget.toast(res.errmsg)
                        }else{
                           widget.toast('获取成员数据异常')
                        }
                    },
                    error: (xhr, status) => {
                         commonPage.loadPageStatus('loadSuccess')
                         widget.toast('服务器异常')
                    },
                    noNetwork: () => {
                        commonPage.loadPageStatus('loadSuccess')
                        widget.toast('网络连接失败，请检查网络')
                    }
                })
            },
            /**
             * 跳转搜索页
             * @return {}
             */
            toSearch(){
                window.location.href="dmsaas://SearchSinglePeople"
            }
        },
        created(){
            this.init()
        }
        
    }

    
</script>

<!-- CSS 样式 -->
<style src="../../node_modules/weui/dist/style/weui.css"></style>
<style src="../../static/css/common.css"></style>
<style src="../../static/css/user-list.css"></style>
<style>
  .scroller-wrap .nav-item{
      float: left;
    }
  .mod-crumbs .arrow.nav-item{
    margin: 18px 8px;
  }
  .xs-container{
    background: #fff;
  }
</style> 


